<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票务详情 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,.06);
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 20px;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,.1);
        }
        .card-header {
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
            font-weight: 600;
        }
        .badge {
            padding: 0.5em 0.75em;
            font-weight: 500;
        }
        .table th {
            background-color: #f7f7f9;
            border-top: none;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .table td {
            vertical-align: middle;
        }
        .table-bordered th, .table-bordered td {
            border-color: #f0f0f0;
        }
        .bg-light {
            background-color: #f8f9fa !important;
        }
        .list-group-item {
            border-left: none;
            border-right: none;
            padding: 0.75rem 1.25rem;
            transition: all 0.2s;
        }
        .list-group-item:hover {
            background-color: #f8f9fa;
        }
        .list-group-item i {
            width: 20px;
            text-align: center;
            margin-right: 8px;
        }
        .btn-outline-info {
            transition: all 0.3s;
        }
        .badge-pill {
            padding-right: 1em;
            padding-left: 1em;
        }
        footer {
            background: linear-gradient(135deg, #343a40 0%, #212529 100%);
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane-departure mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-white shadow-sm">
                <li class="breadcrumb-item"><a href="/flightbooking/" class="text-decoration-none"><i class="fas fa-home"></i> 首页</a></li>
                <li class="breadcrumb-item"><a href="/flightbooking/tickets" class="text-decoration-none"><i class="fas fa-ticket-alt"></i> 票务管理</a></li>
                <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-info-circle"></i> 票务详情</li>
            </ol>
        </nav>

        <div class="alert alert-danger shadow-sm" th:if="${ticket == null}">
            <h4 class="alert-heading"><i class="fas fa-exclamation-triangle mr-2"></i>未找到机票信息</h4>
            <p>抱歉，未能找到您查询的机票信息。这可能是因为该机票已被删除或票号不存在。</p>
            <hr>
            <p class="mb-0">
                <a href="/flightbooking/tickets" class="btn btn-primary"><i class="fas fa-arrow-left mr-1"></i> 返回票务列表</a>
            </p>
        </div>

        <div class="row animated fadeIn" th:if="${ticket != null}">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle mr-2"></i>机票详情</h5>
                        <span th:if="${ticket.status == '已预订'}" class="badge badge-pill badge-warning">已预订</span>
                        <span th:if="${ticket.status == '已出票'}" class="badge badge-pill badge-success">已出票</span>
                        <span th:if="${ticket.status == '已取消'}" class="badge badge-pill badge-danger">已取消</span>
                        <span th:if="${ticket.status == '已退票'}" class="badge badge-pill badge-secondary">已退票</span>
                        <span th:if="${ticket.status == '已使用'}" class="badge badge-pill badge-info">已使用</span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-12 text-center">
                                <div class="mb-3">
                                    <strong class="d-block text-primary" th:text="${ticket.flight != null ? ticket.flight.departureCity : '未知'}" style="font-size: 1.2rem;">北京</strong>
                                    <div class="d-flex justify-content-center align-items-center my-2">
                                        <hr class="flex-grow-1" style="max-width: 100px;">
                                        <i class="fas fa-plane mx-3 text-primary"></i>
                                        <hr class="flex-grow-1" style="max-width: 100px;">
                                    </div>
                                    <strong class="d-block text-primary" th:text="${ticket.flight != null ? ticket.flight.arrivalCity : '未知'}" style="font-size: 1.2rem;">上海</strong>
                                </div>
                                <div>
                                    <span class="badge badge-light shadow-sm mr-2" th:text="${ticket.flightId}">CA1234</span>
                                    <span class="badge badge-light shadow-sm" th:text="${ticket.flight != null ? ticket.flight.airlineCompany : '未知'}">中国国际航空</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tr>
                                    <th class="bg-light" style="width: 150px;"><i class="fas fa-hashtag mr-1 text-muted"></i> 票号</th>
                                    <td th:text="${ticket.ticketId}">1234</td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-plane-departure mr-1 text-muted"></i> 出发时间</th>
                                    <td th:text="${ticket.flight != null ? #dates.format(ticket.flight.departureTime, 'yyyy-MM-dd HH:mm') : '未知'}">2023-07-01 08:00</td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-plane-arrival mr-1 text-muted"></i> 到达时间</th>
                                    <td th:text="${ticket.flight != null ? #dates.format(ticket.flight.arrivalTime, 'yyyy-MM-dd HH:mm') : '未知'}">2023-07-01 10:00</td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-couch mr-1 text-muted"></i> 座位号</th>
                                    <td><span class="badge badge-pill badge-light shadow-sm" th:text="${ticket.seatNumber}">12A</span></td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-tag mr-1 text-muted"></i> 原价</th>
                                    <td th:text="${ticket.flight != null ? ticket.flight.basePrice + '元' : '未知'}">1500.00元</td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-percentage mr-1 text-muted"></i> 折扣率</th>
                                    <td th:text="${ticket.passenger != null && ticket.passenger.vipDiscount != null ? ticket.passenger.vipDiscount.multiply(new java.math.BigDecimal('100')) + '%' : '无折扣'}">80%</td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="fas fa-money-bill-wave mr-1 text-muted"></i> 实付金额</th>
                                    <td><strong th:text="${ticket.actualPrice + '元'}" class="text-danger" style="font-size: 1.1rem;">1200.00元</strong></td>
                                </tr>
                                <tr>
                                    <th class="bg-light"><i class="far fa-calendar-alt mr-1 text-muted"></i> 购票时间</th>
                                    <td th:text="${#dates.format(ticket.purchaseDate, 'yyyy-MM-dd HH:mm:ss')}">2023-07-01 08:00:00</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-user mr-2"></i>旅客信息</h5>
                    </div>
                    <div class="card-body">
                        <div th:if="${ticket.passenger != null}">
                            <div class="text-center mb-3">
                                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                    <i class="fas fa-user fa-2x text-info"></i>
                                </div>
                                <h5 th:text="${ticket.passenger.name}" class="mb-0">张三</h5>
                            </div>
                            <div class="list-group list-group-flush">
                                <div class="list-group-item border-0 px-0">
                                    <i class="fas fa-id-card text-muted"></i>
                                    <strong>身份证：</strong> <span th:text="${ticket.passenger.idCard}">110101199001010000</span>
                                </div>
                                <div class="list-group-item border-0 px-0">
                                    <i class="fas fa-phone-alt text-muted"></i>
                                    <strong>电话：</strong> <span th:text="${ticket.passenger.phone}">13800138000</span>
                                </div>
                                <div class="list-group-item border-0 px-0">
                                    <i class="fas fa-envelope text-muted"></i>
                                    <strong>邮箱：</strong> <span th:text="${ticket.passenger.email}">example@email.com</span>
                                </div>
                            </div>
                            <hr>
                            <a th:href="@{/passengers/{id}(id=${ticket.passenger.passengerId})}" class="btn btn-outline-info btn-block">
                                <i class="fas fa-user-circle mr-1"></i> 查看旅客详情
                            </a>
                        </div>
                        <div th:if="${ticket.passenger == null}" class="text-center text-muted py-5">
                            <i class="fas fa-user-slash fa-3x mb-3"></i>
                            <p>未关联旅客信息</p>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-cogs mr-2"></i>票务操作</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            <a th:if="${ticket.status == '已预订'}" th:href="@{/tickets/issue/{id}(id=${ticket.ticketId})}" 
                               class="list-group-item list-group-item-action" onclick="return confirm('确认出票？')">
                                <i class="fas fa-check-circle text-success"></i> 确认出票
                            </a>
                            <a th:if="${ticket.status == '已预订'}" th:href="@{/tickets/cancel/{id}(id=${ticket.ticketId})}" 
                               class="list-group-item list-group-item-action text-danger" 
                               onclick="return confirm('确定要取消此票吗？')">
                                <i class="fas fa-times-circle"></i> 取消订票
                            </a>
                            <a th:if="${ticket.status == '已出票'}" th:href="@{/tickets/refund/{id}(id=${ticket.ticketId})}" 
                               class="list-group-item list-group-item-action text-warning" 
                               onclick="return confirm('确定要退票吗？这可能会产生退票手续费。')">
                                <i class="fas fa-undo"></i> 申请退票
                            </a>
                            <a th:if="${ticket.status == '已出票'}" th:href="@{/tickets/check-in/{id}(id=${ticket.ticketId})}" 
                               class="list-group-item list-group-item-action text-success" 
                               onclick="return confirm('确认旅客已使用此票？')">
                                <i class="fas fa-plane"></i> 标记已使用
                            </a>
                            <a th:href="@{/tickets/print/{id}(id=${ticket.ticketId})}" class="list-group-item list-group-item-action" target="_blank">
                                <i class="fas fa-print text-info"></i> 打印票据
                            </a>
                            <a href="/flightbooking/tickets" class="list-group-item list-group-item-action">
                                <i class="fas fa-arrow-left text-secondary"></i> 返回列表
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-left">
                    <h5>航空订票系统</h5>
                    <p class="text-muted">提供高效便捷的航班订票管理解决方案</p>
                </div>
                <div class="col-md-6 text-center text-md-right">
                    <p class="mb-0">© 2025 航空订票系统 - JZA04</p>
                    <p class="text-muted small">版本 v1.0.0</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>